<template>
  <div
    style="display: flex;
  justify-content: center;
  "
  >
    <el-form
      label-width="120px"
      style="display: flex;
      flex-direction: column;
      "
    >
      <el-form-item
        label="集群名称"
      >
        <el-input
          v-model="form.clusterName"
          style="width: 190px"
          placeholder="请输入"
          disabled
        />
      </el-form-item>
      <el-form-item label="集群版本">
        <el-select
          v-model="form.clusterVersion"
          placeholder="请选择"
          style="width: 190px"
          disabled
        >
          <el-option
            v-for="val in versionList"
            :key="val"
            :label="val"
            :value="val"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="集群标识">
        <el-input
          v-model="form.clusterFlag"
          style="width: 190px"
          placeholder="请输入"
          disabled
        />
      </el-form-item>
      <el-form-item label="hdfs前缀路径">
        <el-input
          v-model="form.hdfsPrefixPath"
          placeholder="请输入"
          style="width: 320px"
          disabled
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import ballsApi from '@/api/dashboard/ballsPanel'

export default {
  data() {
    return {
      form: {
        id: '',
        clusterName: '',
        clusterFlag: '',
        clusterVersion: '',
        hdfsPrefixPath: '',
        appPath: ''
      },
      versionList: ['CDH 6.3.2 (Parcel)']
    }
  },
  mounted() {
    this.getData()
  },

  methods: {
    getData() {
      var param = {
        current: 1,
        size: 10,
        clusterName: '万国'
      }
      ballsApi.getclustersparingconf(param)
        .then((data) => {
          this.length = data.total
          this.form = data.records[0]
        })
    },
    bNext() {
      this.$emit('bNext')
    },
    bCloses() {
      this.$emit('bCloses')
    }
  }
}
</script>

<style>
</style>
